<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="container-fluid">

    <link rel="stylesheet" href="/static/dist/lib/chosen/chosen.css">
    <link rel="stylesheet" href="/static/dist/lib/chosenicons/zui.chosenicons.css">
    数据采集
    <form id="role-form-add" name="resourceForm" enctype="multipart/form-data" method="post" >
        <fieldset>
            <div class="form-group">
                <div class="row">
                    <div class="col-md-4">
                        <div class="input-control has-label-left-sm">
                            <select class="chosen-select form-control" name="icon" id="chosenProvinces" placeholder="省份" data-value="icon-star"></select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="input-control has-label-left-lg">
                            <select class="chosen-select form-control" name="icon" id="chosenCities" placeholder="市" data-value="icon-star"></select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="input-control has-label-left-lg">
                            <select class="chosen-select form-control" name="icon" id="chosenDistricts" placeholder="区/县" data-value="icon-star"></select>
                        </div>
                    </div>
                </div>
            </div>
            <button type="button" class="btn btn-primary" id="toilet_btn_gather">采 集</button>
        </fieldset>
    </form>

    <script src="/static/dist/lib/chosen/chosen.js"></script>
    <script src="/static/dist/lib/chosenicons/zui.chosenicons.js"></script>
    <script type="application/javascript">

        $(function () {
            initChosen();
        });


        /**
         * 采集按钮
         */
        $('#toilet_btn_gather').on('click', function () {
            // gather
            new $.zui.Messager('采集中……', {
                type: 'success',
                icon: 'check',//smile
                close: true,
                placement: 'center' // 定义显示位置
            }).show();
        });

        function initChosen() {
            /**
             * 初始化上级资源
             */
            loadProvinces();
        }



        /**
         * 获取省份信息
         */
        function loadProvinces() {
            $.get('/api/provinces', {}, function(res) {
                var html = "<option value=\"\"></option>";
                for(index in res){
                    if(res[index]){
                        html += "<option value='" + res[index].code + "'>" + res[index].name + "</option>";
                    }
                }
                $('#chosenProvinces').append(html);
                $('#chosenProvinces').chosen({
                    no_results_text: '没有找到',    // 当检索时没有找到匹配项时显示的提示文本
                    disable_search_threshold: 0, // 10 个以下的选择项则不显示检索框
                    compact_search: true,           // 启用紧凑的单项选择
                    search_contains: true         // 从任意位置开始检索
                });
                $('#chosenProvinces').on('change', function(evt, params){
                    $('#chosenCities').html('');
                    $('#chosenCities').trigger('chosen:updated');
                    $('#chosenDistricts').html('');
                    $('#chosenDistricts').trigger('chosen:updated');
                    loadCities(params.selected);
                });

            });
        }

        /**
         * 根据省份获取城市信息
         * @param provinceCode
         */
        function loadCities(provinceCode) {
            $.get('/api/cities/' + provinceCode, {}, function(res) {
                var html = "<option value=\"\"></option>";
                for(index in res){
                    if(res[index]){
                        html += "<option value='" + res[index].code + "'>" + res[index].name + "</option>";
                    }
                }
                $('#chosenCities').html(html);
                $('#chosenCities').trigger('chosen:updated');
                $('#chosenCities').chosen({
                    no_results_text: '没有找到',    // 当检索时没有找到匹配项时显示的提示文本
                    disable_search_threshold: 0, // 10 个以下的选择项则不显示检索框
                    compact_search: true,           // 启用紧凑的单项选择
                    search_contains: true         // 从任意位置开始检索
                });
                $('#chosenCities').on('change', function(evt, params){
                    $('#chosenDistricts').html('');
                    $('#chosenDistricts').trigger('chosen:updated');
                    loadDistricts(params.selected);
                });
            });
        }

        /**
         * 根据城市获取县/区信息
         * @param cityCode
         */
        function loadDistricts(cityCode) {
            $.get('/api/districts/' + cityCode, {}, function(res) {
                var html = "<option value=\"\"></option>";
                for(index in res){
                    if(res[index]){
                        html += "<option value='" + res[index].code + "'>" + res[index].name + "</option>";
                    }
                }
                $('#chosenDistricts').html(html);
                $('#chosenDistricts').trigger('chosen:updated');
                $('#chosenDistricts').chosen({
                    no_results_text: '没有找到',    // 当检索时没有找到匹配项时显示的提示文本
                    disable_search_threshold: 0, // 10 个以下的选择项则不显示检索框
                    compact_search: true,           // 启用紧凑的单项选择
                    search_contains: true         // 从任意位置开始检索
                });
                $('#chosenDistricts').on('change', function(evt, params){
                    console.log(2323);
                    console.log(evt);
                    console.log(params);
                });
            });
        }

    </script>

</div>
</body>
</html>